<template lang="pug">
  .page.h-100
    .AccountsReceivableManage.h-100
      .pl-10.pr-10.h-100
        .ivu-row.h-100
          .ivu-col.ivu-col-span-4.pr-20.h-100
            Tree.organization-tree(:data="treeData" @on-select-change="handleSelectChange")
          .ivu-col.ivu-col-span-20
            .pl-20.pr-20.bg-white
              Table.beautiful-table(:columns="thead" :data="tableData" :stripe="true" ref="demoTable" @on-selection-change="handleOnSelectChange")
                .clearfix.font-16(slot="header")
                  .table-title-lefttxt.pull-left
                    |合计
                    span.text-info.pl-5.pr-5.font-weight {{tableComone.totalRows}}
                    |条
                  .pull-right.table-title-btns
                    Button.mr-10(type="info" @click="handleShowBatchImportModal" :disabled="!currentTreeItem") 批量导入
                    Button(type="info" @click="handleShowCreateOrganizationModal(null)" :disabled="!currentTreeItem") 新增
                .clearfix.pl-20.pr-20(slot="footer")
                  Page(
                    :total="tableComone.totalRows"
                    @on-change="onChangePage"
                    @on-page-size-change="onpageSizeChange"
                    show-sizer
                    show-total
                    placement="top"
                    prev-text="上一页"
                    next-text="下一页"
                    :page-size-opts="[10, 20, 30, 50, 100]"
                  )
                template(slot-scope="{ row, index }" slot="action")
                  Button.mr-10(type="text" size="small" @click="handleShowCreateOrganizationModal(row.id)") 编辑
                  Button.mr-10(type="text" size="small" @click="handleShowAdjusSuperiorModal(row.id)") 调整上级
                  Button(type="text" size="small"  v-if="!row.enabled" @click="enabledList(row.id, !row.enabled)") 启用
                  Button(type="text" size="small" v-if="row.enabled" @click="enabledList(row.id, !row.enabled)") 禁用

    //- 是否下载错误模板
    ErrorTemplateModal(ref="ErrorTemplateModal")

    //- 批量导入弹窗
    BatchImportModal(ref="BatchImportModal" @query="searchFn")

    //- 新建弹窗
    CreateOrganizationModal(ref="CreateOrganizationModal" @handleSubmit="searchFn" @queryTreeList="queryTreeList")

    //- 调整上级
    AdjusSuperiorModal(ref="AdjusSuperiorModal" @handleSubmit="searchFn")
</template>

<script>
import { Common } from '@/utils/common.js'
import { OrganizationApi } from '@/api/Organization.api.js'
import { OrganizationInfoThead } from './tableHead.js'
import _cloneDeep from 'clone-deep'
import ErrorTemplateModal from '@/components/errorTemplateModal.vue'
import BatchImportModal from './modal/batchImportModal.vue'
import CreateOrganizationModal from './modal/CreateOrganizationModal.vue'
import AdjusSuperiorModal from './modal/AdjusSuperiorModal.vue'

export default {
  name: '', // 组织信息管理页面

  components: {
    ErrorTemplateModal,
    BatchImportModal,
    CreateOrganizationModal,
    AdjusSuperiorModal
  },

  data () {
    return {
      treeData: [],
      thead: _cloneDeep(OrganizationInfoThead),
      tableData: [],
      selectedId: [], // 勾选的id集合,array格式
      selectedArr: [], // 勾选的id, name数组集合
      tableComone: {
        pageIndex: 1,
        totalRows: 0,
        pageSize: 10
      },
      downLoadRul: '',
      arrListDown: {},
      importFile: null,
      currentTreeItem: null
    }
  },
  computed: {
  },

  mounted () {
    this.queryTreeList()
    // this.query()
  },

  methods: {
    // 获取树列表
    async queryTreeList () {
      let res = await OrganizationApi.getTreeList()
      console.log('获取树res: ', res)
      if (res.status === 200 && res.data.success) {
        this.treeData = res.data.data
      } else {
        this.treeData = []
      }
    },

    // 点击树
    handleSelectChange (arr) {
      if (arr.length) {
        this.currentTreeItem = arr[0]
        this.query()
      } else {
        this.currentTreeItem = null
        this.tableData = []
        this.tableComone.totalRows = 0
      }
    },

    // 搜索
    searchFn () {
      this.tableComone.pageIndex = 1
      this.query()
    },

    /**
     * 分页页码变动
     * @param {Number} val pageIndex
     */
    onChangePage (val) {
      this.tableComone.pageIndex = val
      this.query()
    },
    /**
     * 分页页码变动
     * @param {Number} val pageSize
     */
    onpageSizeChange (val) {
      this.tableComone.pageIndex = 1
      this.tableComone.pageSize = val
      this.query()
    },
    /**
     * 分页查询接口
     * @param {Object} obj {pageIndex, pageSize}
     */
    async query () {
      var params = {
        ParentId: this.currentTreeItem ? this.currentTreeItem.id : '',
        HasPaging: true,
        PageIndex: this.tableComone.pageIndex,
        PageSize: this.tableComone.pageSize
      }
      if (!this.currentTreeItem.id) {
        params.LevelId = 1
      }
      let res = await OrganizationApi.getList(params)
      console.log('获取列表res: ', res)
      if (res.status === 200 && res.data.success) {
        this.tableData = res.data.data
        this.tableComone.totalRows = res.data.totalRows
      } else {
        this.tableData = []
      }
    },

    // 表格选择操作
    handleOnSelectChange (value) {
      this.selectedArr = value.map((item) => {
        return { id: item.id, name: item.invoiceItem }
      })
      this.selectedId = value.map((item) => {
        return item.id
      })
      console.log('列表勾选数组1', this.selectedArr)
      console.log('列表勾选数组2', this.selectedId)
    },

    // 批量导入-上传前文件
    handleBeforeUploadImportInvoice (file) {
      this.importFile = file
      console.log('file: ', this.importFile)
    },

    // 批量导入成功(当前页面fn)
    uploadSuccessImportInvoice (res) {
      console.log('批量导入res: ', res)
      if (res.code === 200 && res.success) {
        if (res.data) {
          if (res.data) {
            // this.$Message.error('上传有错误，你可以下载错误数据文件')
            // window.open(baseUrl + res.data, '_blank')
            this.$refs.ErrorTemplateModal.downloadUrl = res.data
            this.$refs.ErrorTemplateModal.isShowErrorTemplateModal = true
          } else {
            this.$Message.success(res.message)
            this.query()
          }
        } else {
          this.$Message.success(res.message)
          this.query()
        }
      } else {
        this.$Message.error({
          content: res.message,
          duration: 10,
          closable: true
        })
      }
    },

    // 批量导入-显示弹窗
    handleShowBatchImportModal () {
      this.$refs.BatchImportModal.file = null
      this.$refs.BatchImportModal.errorData.isError = false
      this.$refs.BatchImportModal.isShowBatchImportModal = true
    },

    // 显示新增弹窗
    handleShowCreateOrganizationModal (id) {
      this.$refs.CreateOrganizationModal.show()
      this.$refs.CreateOrganizationModal.createOrganizationModalTitle = id ? '修改组织信息' : '新增组织信息'
      this.$refs.CreateOrganizationModal.basicDataId = id
      this.$refs.CreateOrganizationModal.getModel(id, this.currentTreeItem.id)
    },

    // 显示调整上级弹窗
    handleShowAdjusSuperiorModal (id) {
      this.$refs.AdjusSuperiorModal.show()
      this.$refs.AdjusSuperiorModal.getModel(id, this.currentTreeItem.title)
    },

    // 启用/禁用
    async enabledList (id, enabled) {
      var params = {
        ids: id,
        enabled: enabled
      }
      let res = await OrganizationApi.enabledList(params)
      if (res.status === 200 && res.data.success) {
        this.$Message.success(res.data.message)
        this.query()
      } else {
        this.$Message.error({
          content: res.data.message,
          duration: 10,
          closable: true
        })
      }
      this.selectedId = []
      this.selectedIdArr = []
    }
  } // methods end
}
</script>

<style lang="less" scoped>

</style>
